<template>
  <el-container class="main-container">
    <!-- 左边导航栏 -->
    <el-aside class="left-aside">
      <el-menu class="left-menu" :default-active="activeMenu" router @select="handleSelect">
<!--        查询可用会议室-->
        <el-menu-item index="/customer/roomList">
          <el-icon><Avatar style="height: 30px;width: 30px;"/></el-icon>
          <span>查询可用会议室</span>
        </el-menu-item>


        <el-menu-item index="/customer/orderList">
          <el-icon><Document style="height: 30px;width: 30px;"/></el-icon>
          <span>可操作订单</span>
          </el-menu-item>


      </el-menu>
    </el-aside>
    <el-container>

      <!-- 顶部导航栏 -->
      <el-header class="right-up-aside">

<!--        <el-button class="header-button" type="primary" @click="backhome"> -->
<!--          <el-icon>-->
<!--            <House />-->
<!--          </el-icon>-->
<!--        </el-button>-->

        <div></div>

        <div class="header-right-group">
          <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" @error="errorHandler" class="header-avatar">
          </el-avatar>
          <el-dropdown placement="bottom-end">
            <div class="username_div" >
              {{username}}
            </div>
            <template #dropdown>
              <el-dropdown-menu>
<!--                <el-dropdown-item>The Action 1st</el-dropdown-item>-->
<!--                <el-dropdown-item>The Action 2st</el-dropdown-item>-->
<!--                <el-dropdown-item>The Action 3st</el-dropdown-item>-->
                <el-dropdown-item @click="logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主要展示区域 -->
      <el-main class="right-main-aside">
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import {getSessionStorage} from "../../utils/common.js";
import {Calendar} from "@element-plus/icons-vue";

export default {
  components: {Calendar},
  data() {
    return {
      username:getSessionStorage("username"),

      avater: '',
      activeMenu: ''
    }
  },
  methods: {
    logout(){
      // this.$store.commit("clearTab", []);
      this.$router.push("/login");
    },
    errorHandler() {
      this.$message.error('头像加载错误')
    },
    backhome() {
      this.$router.push('/home')
    },
    handleSelect(index) {
    this.activeMenu = index
  },
  },
  computed: {
    currentRoute() {
      return this.$route.path
    }
  },
  watch: {
    currentRoute: {
      immediate: true,
      handler(newVal) {
        // 当路由是首页时，清空高亮
        if (newVal === '/home') {
          this.activeMenu = ''
          return
        }
        // 否则高亮匹配的菜单项
        this.activeMenu = newVal
      }
    }
  },
  mounted() {
    this.avater = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7GLMYPqMlt2LgkbPsOnDIAAAAA?rs=1&pid=ImgDetMain'
  },
  handleSelect(index) {
    this.activeMenu = index
  },
}
</script>

<style >
.left-aside {
  width: 300px;
  min-height: 100vh;
  padding-top: 50px;
  background-color: #2c3e50;
  /* 侧边栏背景色（深蓝灰） */
}

.left-menu {
  background-color: #2c3e50 !important;
  /* 覆盖默认背景色 */
  border-right: none;
}

/* 默认菜单项样式 */
.el-menu-item,
.el-sub-menu__title {
  height: 100px !important;
  font-size: large;
  color: #bdc3c7 !important;
  /* 未激活文字颜色（浅灰色） */
  background-color: #2c3e50 !important;
  transition: all 0.3s ease;
}

/* 悬停状态 */
.el-menu-item:hover,
.el-sub-menu:hover .el-sub-menu__title {
  background-color: #34495e !important;
  /* 悬停背景色（稍亮的蓝灰） */
  color: #ecf0f1 !important;
}

/* 激活/选中状态 */
.el-menu-item.is-active {
  background-color: #3498db !important;
  /* 激活背景色（明亮蓝色） */
  color: #ffffff !important;
  /* border-radius: 4px; */
  /* margin: 4px 8px; */
}

/* 子菜单箭头颜色 */
.el-sub-menu .el-icon {
  color: #bdc3c7 !important;
}

/* 激活菜单的图标颜色 */
.el-menu-item.is-active .el-icon {
  color: #ffffff !important;
}

.right-up-aside {
  height: 60px;
  background-color: #3498db;
  color: black;
  display: flex;
  align-items: center;
  
  justify-content: space-between;
  padding: 0 20px;
  font-size: 18px;
}

/* 返回按钮（固定在左侧） */
.header-button {
  margin-right: auto; /* 占据左侧空间 */
}

/* 右侧组合容器（标题 + 头像） */
.header-right-group {
  display: flex;
  align-items: center;  /* 垂直居中 */
  gap: 16px;           /* 标题和头像间距 */
}

.right-main-aside {
  background-color: #ecf0f1;
  /* 柔和的主区域背景 */
  padding: 10px;
}

/* 修改用户名的字体大小 */
.username_div {
  background-color: transparent;
  color: white;
  border: none;
  outline-color:transparent;
  /* padding-left: ; */
  font-size: large; /* 可根据需求调整字体大小 */
}
/* 鼠标悬停时按钮也无背景颜色 */
.username_div:hover {
  color: #0757af;
  background-color: transparent;
  border-color: black;
  box-shadow: none; /* 去除鼠标悬浮时的阴影效果 */
}

/* 去除按钮聚焦时的阴影效果 */
.username_div:focus {
  box-shadow: none;
}
</style>